<template>
    <div class="footerbuttom mx-[36px]  fixed bottom-[24px] left-0">
        <div class="relative flex justify-center items-center h-[48px]">
            <div class="footerbuttom  flex-c">
                <div class="w-[862px] h-[48px] footerbuttoms" :class="getDataImg('bobtnbg')"></div>
            </div>
            <div ref="footerRef" class="absolute bottom-[50px] gap-[12px] text-center">
                <div class="flex" v-if="useDataDashboardThemeStore.$state.dataDashboardIsHidden == 1">
                    <div class="flex" v-if="useDataDashboardThemeStore.$state.dataDashboardType !== 2">
                        <div v-for="item in btnlist"
                            class="w-[114px] cursor-pointer transition-all duration-300 flex justify-center items-center h-[46px]"
                            :class="isactive == item.id ? `${getDataImg('bottombtnbgat')} bgactive text-[16px]` : `${getDataImg('bottombtnbg')}  nobgactive text-[14px] text-[#B4C3DC]`"
                            @click="changebtn(item.id)">
                            {{
                    item.name }}</div>
                    </div>
                    <div class="flex" v-else>
                        <div v-for="item in projectbtn"
                            class="w-[114px] cursor-pointer transition-all duration-300 flex justify-center items-center h-[46px]"
                            :class="isactive == item.id ? `${getDataImg('bottombtnbgat')} bgactive text-[16px]` : `${getDataImg('bottombtnbg')}  nobgactive text-[14px] text-[#B4C3DC]`"
                            @click="changebtn(item.id)">
                            {{
                    item.name }}</div>
                    </div>
                </div>
                <div class="flex" v-else>
                    <div v-for="item in buttnlist"
                        class="w-[114px] cursor-pointer transition-all duration-300 flex justify-center items-center h-[46px]"
                        :class="isactive == item.id ? `${getDataImg('bottombtnbgat')} ${getDataImg('bottombtnbg')} bgactive text-[16px]` : `${getDataImg('bottombtnbg')}  nobgactive text-[14px] text-[#B4C3DC]`"
                        @click="changebtn(item.id)">
                        {{
                    item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getDataImg } from "@/utils/data-themset"
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
import { useToggleAnimate } from "@/views/large-data-screen/useToggleAnimate";
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
//深度监听dataDashboardMenuId
const buttnlists = ref([{ name: '所有项目', id: 1 },
{ name: '告警项目', id: 2 },])
const channel = ref(null)
const isactive = ref(1)
const props = defineProps({
    btnlist: {
        type: Array,
        default: () => []
    }
})
const footerRef = ref()
const projectbtn = ref(
    [{ name: "地图", id: 1 },
    { name: "平面图", id: 2 },
    { name: "VR", id: 3 },
    { name: "三维", id: 4 },
    { name: "组态", id: 5 },]
)
const buttnlist = ref([
    { name: '平面模式', id: 2 },
    { name: '组态模式', id: 5 },
    { name: 'VR模式', id: 3 },
])
const changebtn = (id: number) => {
    isactive.value = id
    useDataDashboardThemeStore.CHANGE_SETTING({ key: 'dataDashboardButtonId', value: id })
    if (useDataDashboardThemeStore.$state.dataDashboardType == 1) {
        channel.value.postMessage({ key: 'footbtn', value: id, type: 'footbtnchange' });
    }

}
watch(() => useDataDashboardThemeStore.$state.dataDashboardMenuId, (newval, oldval) => {
    useToggleAnimate().footerMotion(footerRef.value)
    if (useDataDashboardThemeStore.$state.dataDashboardType == 1) {
        useDataDashboardThemeStore.CHANGE_SETTING({ key: 'dataDashboardButtonId', value: 1 })
        isactive.value = 1
        if (channel.value) {
            channel.value.postMessage({ key: 'footbtn', value: 1, type: 'footbtnchange' });
        }
    }
}, {
    immediate: true,
    deep: true
})
onMounted(() => {
    if(useDataDashboardThemeStore.dataDashboardType == 3){
        isactive.value = 0
    }
})
onBeforeMount(() => {
    channel.value = new BroadcastChannel('data-dashboard-them')
})
watch(() => useDataDashboardThemeStore.$state.building
    , (newval, oldval) => {
        if (useDataDashboardThemeStore.dataDashboardIsHidden == 2) {
            useDataDashboardThemeStore.CHANGE_SETTING({ key: 'dataDashboardButtonId', value: newval?.drawingInfo?.drawingInfo?.showMode })
            isactive.value = newval?.drawingInfo?.drawingInfo?.showMode
        }
    }, {
    immediate: true,
    deep: true
})
watch(() => useDataDashboardThemeStore.GET_SETTING('dataDashboardType'), (newValue, oldValue) => {
    useToggleAnimate().footerMotion(footerRef.value)
    if (newValue == 2) {
        isactive.value = useDataDashboardThemeStore.GET_SETTING('projectInfo')?.indexMode
    } else if (newValue == 3) {
        isactive.value = 0
    }
    else {
        isactive.value = 1
    }
}, { immediate: true })
watch(() => useDataDashboardThemeStore.GET_SETTING('projectInfo'), (newValue, oldValue) => {
    if (useDataDashboardThemeStore.GET_SETTING('dataDashboardType') == 2) {
        isactive.value = useDataDashboardThemeStore.GET_SETTING('projectInfo')?.indexMode
    }
}, { immediate: true })
watch(() => useDataDashboardThemeStore.GET_SETTING('dataDashboardIsHidden'), (newValue, oldValue) => {
        isactive.value = useDataDashboardThemeStore.GET_SETTING('dataDashboardButtonId')
}, { immediate: true })

</script>
<style lang="scss" scoped>
.footerbuttom {
    width: calc(100% - 72px);
    height: 48px;
    // background: url('@/assets/screenimg/footerbgimg.png') no-repeat;
    background-size: 100% 100%;
}

.footerbuttoms {
    background-size: 100% 100%;
}

.bgactive {
    // background: url('@/assets/screenimg/foteractive.png') no-repeat;
    background-size: 100% 100%;
}

.nobgactive {
    // background: url('@/assets/screenimg/nofoteractive.png') no-repeat;
    background-size: 100% 100%;
}
</style>
